.photo-view-page {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('./img/bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

    .top {}

    .jian {
        position: absolute;
        top: 890px;
        width: 840px;
        display: flex;
        left: 50%;
        transform: translateX(-50%);

        justify-content: space-between;
        z-index: 900;

        img {
            position: absolute;
        }

        .left {
            left: -50px;
            transform: rotateY(180deg);
        }

        .right {
            right: -50px;
        }

    }

    .mask-biao {
        position: absolute;
        width: 850px;
        height: 850px;
        display: flex;
        bottom: 350px;
        flex-wrap: wrap;
        background-color: #ffffffa0;
        backdrop-filter: blur(10px);
        border-radius: 150px;
        padding-top: 100px;
        justify-content: center;
        z-index: 900;

        img {
            width: 170px;
            height: 155px;
            flex-shrink: 0;
            margin: 10px 30px;
            .text-btn()
        }
    }

    .photo-wrap {
        position: relative;
        // display: flex;
        // align-items: center;
        padding-top: 200px;
        height: 1280px;
        // &.screen-ac {
        //     align-items: start;
        //     padding-top: 120px;
        //     // transform: translate(0, -150px);
        // }

        // height: ;
        &.photo-wrap2 {
            padding-top: 160px;
        }

        &.photo-wrap3 {
            padding-top: 130px;
        }
    }

    .photo {
        // top: 430px;
        // position: absolute;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .kuang-bg {
            position: relative;
            width: 850px;
            z-index: 10;

        }

        .kuang-bg2 {
            width: 740px;
            // height: 1049px;
        }

        .kuang-bg3 {
            width: 800px;
            // height: 1049px;
        }

        .video-box {
            position: absolute;
            overflow: hidden;
        }

        .video-box1 {
            @width: 756px;
            @height: 1000px;
            width: @width;
            height: @height;
            clip-path: polygon(30px 0, @width - 46px 0, 100% 46px, 100% @height - 46px, @width - 46px 100%, 50px 100%, 0 @height - 50px, 0 30px);
            /* 使用px定义梯形 */
        }

        .video-box2 {
            width: 644px;
            height: 920px;
        }

        .video-box3 {
            width: 644px;
            height: 860px;
        }

        #myvideo {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .rnd-wrap {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 800;

            .rnd-item {
                position: relative;

                width: 100%;
                height: 100%;

                .delete {
                    position: absolute;
                    top: -20px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    color: #f00;
                    font-size: 30px;
                    border: 1px solid #f00;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    z-index: 30;
                    backdrop-filter: blur(10px);
                }

                .mask-img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    z-index: 10;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }


        .down {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }





        .previewimg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;

        }

        .process-box {
            position: absolute;
            top: 400px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 20;
        }

        .process-text {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            font-size: 45px;
            font-weight: bold;
            background: linear-gradient(to top, #FFB82A, #FFE000);
            /* 渐变颜色 */
            -webkit-background-clip: text;
            /* 文字背景裁剪 */
            -webkit-text-fill-color: transparent;
            /* 文字填充颜色透明 */
        }

        .ai-process {}


    }

    .ren {
        position: absolute;
        bottom: 0;
        z-index: 200;
        bottom: 370px;
        left: 20px;

        img {
            width: 300px;
        }
    }

    .btn {
        position: absolute;
        display: flex;
        bottom: 150px;

        .my-button-sm {
            margin: 0 15px;
        }

        &.btn2 {
            bottom: 120px;
        }

        &.btn3 {
            .my-button-sm {
                margin: 0 65px;
            }
        }
    }

    .share-box {
        position: absolute;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .top-code {
            // width: 540px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .qrcode {
                position: relative;

                .text {
                    position: absolute;
                    font-size: 26px;
                    color: #fff;
                    // left: 50%;
                    bottom: -30px;
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    letter-spacing: 10px;
                }
            }

            .da-yin {
                width: 232px;
                height: 232px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: url('./img/dayin.png');
                line-height: 50px;
                letter-spacing: 5px;
                font-size: 40px;
                color: #fff;
                z-index: 1000;
                font-weight: bold;
                margin: 0 0px 0 18px;
                .text-btn();
            }

            .agin-btn {
                background: url('./img/btnBg.png');
                margin: 0;
            }

            .agin-btn1 {
                background: url('./img/btnBg1.png');
                margin: 0;
            }
        }

        .my-button {
            margin-top: 20px;

        }

    }
}